<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Api } from "@/apis";
import { DiscoverListDataType } from "@/typing";

const discoverList = ref<Array<DiscoverListDataType>>([]);

onMounted(async () => {
    const { data } = await Api.getDiscoverList();
    discoverList.value = data.data;
})
</script>

<template>
    <div class="px-8 pb-32 pt-3">
        <div v-for="(l, i) in discoverList" :key="i" class="mb-20">
            <div class="flex mt-5 mb-8 justify-between items-center">
                <div class="text-size">{{ l.title }}</div>
                <div class="text-gray-400">完整榜单 > </div>
            </div>
            <div class="flex">
                <img class="w-32 rounded-xl mr-5" :src="l.img_url" alt="img">
                <div>
                    <div v-for="(c, index) in l.contents" :key="c.id">
                        <div class="text-gray-400 my-2">
                            <span :class="index == 0? 'red' : index == 1? 'orange' : 'yellow'"> {{ index + 1 }}. </span>
                            <span>{{ c.title }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.red {
    color: red;
}

.orange {
    color: rgb(212, 139, 4);
}

.yellow {
    color: rgb(221, 203, 3);
}

.text-size {
    font-size: 16px;
}
</style>